<template>
  <div class="login">
    <div class="login_container">
      <!-- 表单区域 -->
      <el-form
        :model="loginForm"
        :rules="loginFromRules"
        label-width="0"
        class="login_form"
        ref="loginRef"
      >
        <!-- 用户名 -->
        <el-form-item prop="loginName">
          <el-input
            prefix-icon="el-icon-mobile-phone"
            v-model="loginForm.loginName"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            :type="passwordType"
            prefix-icon="el-icon-lock"
            v-model="loginForm.password"
            placeholder="请输入密码"
          >
            <i
              slot="suffix"
              @click.stop="passwordType = 'password'"
              v-if="passwordType !== 'password'"
              class="iconfont icon-yanjing"
            ></i>
            <i
              slot="suffix"
              @click.stop="passwordType = 'text'"
              v-else
              class="iconfont icon-yanjing_bi"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            class="confirmCode"
            prefix-icon="iconfont icon-anquan"
            v-model="loginForm.code"
            placeholder="请输入验证码"
            @keydown.enter.native="loginUser"
          >
            <div class="code" slot="suffix" @click="getImgesCodeFn">
              <img
                :src="`http://likede2-admin.itheima.net/likede${this.$store.state.login.imgUrl}`"
              />
            </div>
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <!-- 提交与取消 -->
        <el-button type="primary" @click="loginUser" :loading="loading">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    // 校验用户名的回调函数
    const confirmUserName = (rule, value, callback) => {
      // console.log(rule, value, callback)
      if (!value) return callback(new Error('请输入您哇塞的称昵'))
      if (!this.userReg.test(value)) return callback(new Error('请输入5-10位称昵,不含特殊字符'))
    }
    // 校验密码的回调函数
    const confirmPassword = (rule, value, callback) => {
      if (!value) return callback(new Error('请告诉您的密码给我'))
      if (!this.passwordReg.test(value)) return callback(new Error('请输入5-16位密码,不含特殊字符'))
    }
    return {
      // 登录按钮的判断
      loading: false,
      // 密码框的眼睛
      passwordType: 'password',
      // 用户输入框
      loginForm: {
        loginName: 'admin',
        password: 'admin',
        code: '', // 验证码
        clientToken: '' // 随机数字
      },
      // 校验用户名正则
      userReg: /^[0-9a-zA-Z]{5,10}$/,
      // 验证密码正则
      passwordReg: /^[0-9a-zA-Z]{5,16}$/,
      loginFromRules: {
        // 验证规则
        loginName: [{ validator: confirmUserName, trigger: 'blur' }],
        password: [{ validator: confirmPassword, trigger: 'blur' }],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '长度为4个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getImgesCodeFn()
  },

  methods: {
    // 获取验证码
    getImgesCodeFn() {
      this.loginForm.clientToken = Math.ceil(Math.random() * 100) // 随机数
      this.$store.dispatch('login/getImagesCode', this.loginForm.clientToken)
    },
    // 登录
    async loginUser() {
      // console.log(this.$refs.loginRef)
      // this.$refs.loginRef.validate((valid) => {
      //   console.log(valid)
      // })
      if (!this.loginForm.loginName || !this.loginForm.password || !this.loginForm.code) {
        if (!this.loginForm.code) return this.$message.warning('请输入验证码')
        return this.$message.warning('请输入用户名或密码')
      }
      try {
        this.loading = true
        const res = await this.$store.dispatch('login/getLogin', this.loginForm)
        this.$message.success(res.msg)
        this.$router.replace('/home')
        this.loading = false
      } catch (error) {
        this.getImgesCodeFn()
        this.$message.error('登录失败')
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  background: url('~@/assets/images/6.jpeg') no-repeat;
  background-size: 100% 100vh;
  width: 100%;
  height: 100vh;
  position: relative;
  .login_container {
    width: 518px;
    height: 388px;
    position: absolute;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 0;
    border: 30px solid transparent;
    border-image: url('~@/assets/images/border3.jpeg') 100;
    // 小鸟
    &::before {
      content: '';
      width: 100px;
      height: 100px;
      position: absolute;
      background-image: url('~@/assets/logo.png');
      background-size: contain;
      background-repeat: no-repeat;
      top: 0;
      left: 0;
      transform: translate(-50%, -80%);
    }
    // 登录列表
    .login_form {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 30px;
      /deep/ input.el-input__inner {
        height: 47px;
        text-indent: 1em;
        background-color: transparent;
        outline: none;
        &:focus {
          border: 1px solid #dcdfe6;
        }
      }
      /deep/.el-button--primary {
        width: 100%;
        background-color: rgb(175, 245, 218);
        border: none;
      }
      /deep/.icon-yanjing_bi,
      .icon-yanjing {
        margin-right: 10px;
      }
      /deep/.icon-anquan {
        display: block;
        margin-left: 1px;
        padding-top: 3px;
      }
      .el-input {
        position: relative;
        //  验证码
        .code {
          position: absolute;
          top: 0;
          right: -5px;
          width: 130px;
          height: 47px;
          img {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
